<template>
  <AppPage title="Live" :back="false">
    <div class="live">
      <div class="desc">
        <h1 class="title">Live Now</h1>

        <p class="sub">Viewer, guest, or host</p>
      </div>

      <div class="swpier-wrapper-diy">
        <swiper
          :pagination="paginationOptions"
          :modules="modules"
          :loop="true"
          :autoplay="autoplayOptions"
          :slides-per-view="2.5"
          :space-between="-40"
          :initial-slide="1"
          :centered-slides="true"
          effect="coverflow"
        >
          <swiper-slide
            class="swiper-slide"
            v-for="item in swiperList"
            :key="item.des"
          >
            <div class="swiper-slide-inner">
              <img src="@/assets/images/test.jpg" alt="" />

              <div class="see">
                <img src="@/assets/images/eye.svg" alt="" />

                <span class="num">8</span>
              </div>

              <div class="info">
                <div class="des">{{ item.des }}</div>

                <div class="info-detail">
                  <div class="avatar">
                    <img src="@/assets/images/avatar.svg" alt="" />
                  </div>

                  <div class="detail">
                    <div class="name">{{ item.name }}</div>

                    <div class="country">
                      <img src="" alt="" />

                      <span class="text">
                        {{ item.country }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </swiper-slide>

          <div class="swiper-pagination"></div>
        </swiper>
      </div>
      <div class="to-live-btn" @click="toStartLive">
        <img src="@/assets/images/video-fill.svg" alt="" />
        <span class="text">Start Live</span>
      </div>
    </div>
  </AppPage>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination } from "swiper/modules";
import AppPage from "@/components/AppPage.vue";
import { useRouter } from "vue-router";
import "swiper/css";
import "swiper/css/autoplay";
import "swiper/css/pagination";
import { reactive } from "vue";
import type { PaginationOptions } from "swiper/types";
// import useZego from "@/composables/useZego";
const modules = reactive([Autoplay, Pagination]);
const autoplayOptions = reactive({
  delay: 3000,
  pauseOnMouseEnter: true,
});
const paginationOptions = reactive<PaginationOptions>({
  el: ".swiper-pagination",
  dynamicBullets: true,
  clickable: true, // 允许点击分页器切换幻灯片
  type: "bullets", // 分页器类型 (bullets, fraction, progressbar)
});
const swiperList = reactive([
  {
    name: "test1",
    des: "TEST Sdas     fsdfasd fsdfas",
    country: "UK",
  },
  {
    name: "test2",
    des: "TEST Sdas  fqrERQWEWE   fsdfasd fsdfas",
    country: "USA",
  },
  {
    name: "test3",
    des: "TEST Sdas     fsdfasd fsdfas",
    country: "USA",
  },
  {
    name: "test4",
    des: "TEST Sdas     fsdfasd fsdfas",
    country: "USA",
  },
  {
    name: "test5",
    c: "TEST Sdas     fsdfasd fsdfas",
    country: "USA",
  },
]);
const router = useRouter();
const toStartLive = () => {
  // role 角色：主播，观众
  router.push({ name: "LiveRoom", params: { id: "0001" }, query: { role: 'host' } });
};
// const zg = useZego()

// const result = await zg.checkSystemRequirements();

// console.log(result, 'ssssssssssssssss')
</script>

<style lang="less">
.swiper {
  padding-bottom: 30px;
  .swiper-pagination .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 1);
    opacity: 0.6;
  }
  .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: rgba(0, 246, 157, 0.8);
  }
}
.live {
  height: calc(100vh - 60px);
  position: relative;
  background-color: rgba(20, 20, 20, 0.9);
  .desc {
    width: 100%;
    color: #fff;
    position: absolute;
    top: 80px;
    text-align: center;
    .title {
      font-size: 36px;
    }
    .sub {
      font-size: 20px;
      letter-spacing: 2px;
    }
  }
  .swpier-wrapper-diy {
    width: 100%;
    position: absolute;
    bottom: 70px;
    .swiper-slide {
      width: 100%;
      height: 288px;
      display: flex;
      align-items: flex-end;
      overflow: visible;
      position: relative;
      z-index: 1;
      .swiper-slide-inner {
        position: absolute;
        border-radius: 16px 16px;
        width: 100%;
        bottom: 0;
        left: 0;
        height: 240px;
        background-color: #fff;
        flex: 1;
        transition: all 0.2s linear;
        overflow: hidden;
        margin-bottom: 0;
        filter: brightness(50%);
        overflow: hidden;
        img {
          object-fit: cover;
        }
        .see {
          background-color: rgba(0, 0, 0, 0.5);
          position: absolute;
          top: 10px;
          left: 10px;
          display: flex;
          padding: 2px 6px;
          line-height: 12px;
          border-radius: 10px;
          img {
            height: 12px;
            margin-right: 2px;
          }
          .num {
            font-size: 10px;
            color: #fff;
            font-weight: bold;
          }
        }
        .info {
          width: 100%;
          padding: 10px 10px;
          position: absolute;
          bottom: 0;
          left: 0;
          text-align: left;
          .des {
            font-weight: bold;
            color: #fff;
            font-size: 12px;
            line-height: 16px;
            word-wrap: wrap;
          }
          .info-detail {
            margin-top: 10px;
            height: 40px;
            display: flex;
            .avatar {
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 24px;
              height: 24px;
              border-radius: 100%;
              border: 1px solid #fff;
              background: #fff;
              margin-right: 5px;
              margin-top: 8px;
              img {
                width: 24px;
                height: 24px;
                border-radius: 100%;
                margin: 0 auto;
              }
            }
            .detail {
              color: #fff;
              font-size: 10px;
              .name {
                line-height: 20px;
                font-weight: bold;
              }
              .country {
                line-height: 20px;
                .text {
                  font-size: 10px;
                }
              }
            }
          }
        }
      }
    }
    .swiper-slide.swiper-slide-active {
      z-index: 2;
      .swiper-slide-inner {
        transform: scale(1.2);
        margin-bottom: 24px;
        filter: brightness(100%);
      }
    }
  }
}
.to-live-btn {
  width: 50%;
  height: 54px;
  line-height: 54px;
  background: #fff;
  border-radius: 54px;
  color: #000;
  display: flex;
  justify-content: center;
  margin-top: 15px;
  cursor: pointer;
  font-weight: bold;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  img {
    height: 40px;
    margin-top: 7px;
    margin-right: 5px;
  }
}
</style>
